<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
  <link href="css/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <link href="css/index.css" rel="stylesheet">
  <title>音乐播放器</title>
</head>

<body>
  <div class="main">
    <div class="container">
      <!-- 标题 -->
      <h3 class="mt-4">音乐播放器 </h3>
      <!-- 列表 -->
      <div class="card mt-4 ">
        <div class="card-body">
          <h5 class="clearfix ">歌曲列表
            <button type="button" id="addMusicButton" class="btn btn-primary btn-sm float-right">
              <i class="fa fa-plus"></i> 添加歌曲
            </button>
          </h5>
          <ul class="list-group border-top list-group-flush mt-4" id="list"></ul>
        </div>
      </div>
    </div>


    <footer class="footer pt-4 pb-4 pl-2 pr-2 fixed-bottom bg-light">
      <!-- 播放进度条 -->
      <div class="progress" style="height: 5px;">
        <div class="progress-bar" id="progress" aria-valuemin="0" aria-valuemax="100"></div>
      </div>
      <div id="progressStatus">0%</div>
      <!-- 播放控件 -->
      <div class="container">
        <div class="row pt-2 pb-2 ">
          <div class="col-4" id="musicName">
            正在播放：
          </div>
          <div class="col-4 text-center">
            <div class="btn-group " role="group" aria-label="Basic example">
              <!-- 左切换键 -->
              <button type="button" class="btn rounded-circle btn-light" id="prev">
                <i class="fa fa-chevron-left"></i>
              </button>
              <!-- 播放键 -->
              <button class="rounded-circle btn btn-primary ml-4 mr-4" id="playPauseBtn">
                <i class="fa fa-play"></i>
              </button>
              <!-- 右切换键 -->
              <button type="button" class="btn rounded-circle btn-light" id="next">
                <i class="fa fa-chevron-right"></i>
              </button>
            </div>
          </div>
          <div class="col-4">
            <!-- 播放时间 -->
            <span id="currentTime">00:00</span> / <span id="totalTime">00:00</span>
          </div>
        </div>
      </div>
    </footer>
  </div>
  <script src="./js/index.js"></script>
</body>

</html>